<script type="text/javascript">

    const material_data = {
        long: 1,
        type: 'image',
        remark: '',
        video_title: '',
        video_desc: ''
    }

    const materialInit = function (layui) {

        let http = layui.http
        let form = layui.form
        let toast = layui.toast
        let table = layui.table
        let clipboard = layui.clipboard

        let options = table_common_options('<?= auth_route('wechat/materialList') ?>', [
            {
                field: 'id',
                width: 80,
                title: 'ID'
            },
            {
                field: 'type',
                width: 100,
                title: '<?= $lang['type'] ?? '' ?>'
            },
            {
                field: 'media_id',
                width: 140,
                title: '<?= $lang['media_id'] ?? '' ?>'
            },
            {
                field: 'filename',
                title: '<?= $lang['filename'] ?? '' ?>'
            },
            {
                field: 'filepath',
                title: '<?= $lang['filepath'] ?? '' ?>',
                templet: function (d) {
                    if (d.url) {
                        return '<img style="max-width: 30px;max-height:30px;" src="' + d.filepath + '">'
                    }
                    return ''
                }
            },
            {
                field: 'remark',
                width: 100,
                title: '<?= $lang['remark'] ?? '' ?>'
            },
            {
                field: 'mime',
                width: 120,
                title: '<?= $lang['mime'] ?? '' ?>'
            },
            {
                field: 'ext',
                width: 100,
                title: '<?= $lang['ext'] ?? '' ?>'
            },
            {
                field: 'size_text',
                width: 100,
                title: '<?= $lang['size'] ?? '' ?>'
            },
            {
                field: 'expire_time',
                width: 180,
                title: '<?= $lang['expire_time'] ?? '' ?>'
            },
            {
                field: 'created_at',
                title: '<?= $lang['created_at'] ?? '' ?>'
            },
            {
                field: 'action',
                width: 200,
                title: '<?= __('btn.operation') ?>',
                fixed: 'right',
                templet: function (d) {
                    return `
                  <a class="layui-btn layui-btn-normal layui-btn-xs copy-media-id" data-clipboard-text="${d.media_id}"><?= __('btn.copy') ?></a>
                  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="material-preview" ><?= __('btn.preview') ?></a>
                  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="material-remove"><?= __('btn.delete') ?></a>
                  `
                }
            },
        ])

        table.render(options)

        table.on('toolbar(material-list)', function (obj) {
            if (obj.event === '__reload__') {
                table.reload('page-table-render', {}, true)
            }
        })

        table.on('tool(material-list)', function (obj) {
            let data = obj.data
            let event = obj.event
            if (event === 'material-preview') {
                window.open('<?= auth_route('wechat/materialPreview') ?>?id=' + data.id)
            } else if (event === 'material-remove') {
                let index = toast.confirm(lang.dialog.confirm_delete || '', function () {
                    http.post('<?= auth_route('wechat/materialRemove') ?>', {id: data.id}, function (res) {
                        toast.response(res)
                        layer.close(index)
                    })
                })
            }
        })

        form.on('submit(search)', function (data) {
            table.reloadData('page-table-render', {
                where: data.field,
            })
            return false
        })

        // 复制素材id
        let clip = new clipboard('.copy-media-id')
        clip.on('success', function (e) {
            layer.msg('<?= __('dialog.cp_success') ?>', {
                icon: 1,
                anim: 'slideDown',
                offset: 't'
            })
        })
        clip.on('error', function (e) {
            layer.msg('<?= __('dialog.cp_fail') ?>', {icon: 2})
        })
    }

</script>